<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=750,viewport-fit=cover,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-capable">
    <meta content="black" name="apple-mobile-web-status-bar-style">
    <title>详情</title>
    <link rel="stylesheet" type="text/css" href="../css/ProductDetail.css" />
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/request.js"></script>
    <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="resourceView">
            <img :src="this.goods.goodsPic"/>
        </div>
        <div class="goods_info">
            <div class="priceView">
                <label class="fuhao1">不凡币:</label>
                <label class="now_price">{{goods.price}}</label>
            </div>
            <div class="duihuan">
                <label class="goods_name">{{goods.name}}</label>
                <label class="goods_des" @click="duihuan()">　兑换　</label>
            </div>
        </div>
        <!-- 富文本内容 -->
        <div class="intro" v-html="goods.detail"></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            id:'',
            type:'',
            goods:'',
        },
        methods: {
            //获取商品
            getGoods() {
                var _this = this;//../NotifyReqController/NotifyReq
                ajaxGet("../goodsController/getById", {"id":_this.id}, function (result) {
                    const regex = new RegExp('<img', 'gi');
                    _this.goods = result;
                    _this.goods.detail = _this.goods.detail.replace(regex, `<img style="max-width: 100%;"`);
                });
            },
            duihuan() {
                window.location.href = "../html/address.html?goodsId=" + this.goods.id;//修改页面
                /*else{
                    if(confirm("确定兑换"+this.goods.name+"吗？选择确定将会成功兑换，否则请取消")){
                        var _this = this;
                        ajaxPost("../NotifyReqController/menpiaoPay",{"nameId":_this.goodsId}, function (result) {
                            debugger
                            if(result){
                                alert("兑换完成");
                                window.location.href = "../html/orderInfo.html";//订单页面
                            }else{
                                alert("兑换失败请稍后再试");
                            }
                        });
                    }else{
                        alert("您已取消兑换操作");
                    }
                }*/
            },
            getUrlKey(name) {
                return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
            }
        },
        created() {
            // 地址栏："../html/ProductDetail.html?id="+id+"&type="+type;
            //获取地址栏参数
            this.id = this.getUrlKey('id')
            this.type = this.getUrlKey('type')
        },
        mounted(){
            this.getGoods();
            console.log("挂载完成生命周期");
        },
    })
</script>
